<template>
	<div class="nearby">
		<h3 class="nearby__title"></h3>
        <router-link
            v-for="item in nearbyList"
            :to="`/shop/${item._id}`"
            :key="item._id">
            <ShopInfo :item="item"/>
        </router-link>
	</div>
</template>

<script>
import {ref} from 'vue'

import {get} from '@/utils/request'
import ShopInfo from "@/components/ShopInfo";

const useNearbyListEffect = () => {
	const nearbyList = ref([])
	const getNearbyList = async () => {
		const result = await get('/api/shop/hot-list')
		if (result?.error === 0 && result?.data.length) {
			nearbyList.value = result.data
		}
	}
	return{nearbyList, getNearbyList}
}
	export default{
		name: 'nearby',
		components:{ShopInfo},
		setup(){
			const {nearbyList, getNearbyList} = useNearbyListEffect();
			getNearbyList();
			return {nearbyList}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../style/iconfont.css";
	@import "../../style/mixins.scss";
	@import '../../style/viriables.scss';
	.nearby {
		&__title {
			margin: .16rem 0 .02rem 0;
			font-size: .18rem;
			font-weight: normal;
			color: $content_fontcolor;
		}
	}
    a{
        text-decoration: none;
    }
</style>
